import React, { Component } from 'react'
import {
  Select,
  Table,
  Modal,
  Typography,
  Form,
  message,
  Tooltip,
  Space,
  Row,
  Col,
  Tag,
} from 'antd'
import {
  PlusOutlined,
  DeleteOutlined,
  DeleteFilled,
  EyeOutlined,
  DownloadOutlined,
} from '@ant-design/icons'
import 'antd/dist/antd.css'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { getDictionaryLabel } from '../../rudexRou/OperatesCookie.js'
import AdvancedSearchForm from '../../componentJsx/common/searchForm'
import '../../componentCss/component.css'
import HasPermi from '../../componentJsx/common/hasPermi'
import EditForm from '../../componentJsx/common/editForm'
import { confirmDeptByCode } from '../../utils'
import NewModal from '../../componentJsx/common/NewModal'
import { v4 as uuidv4 } from 'uuid'
import './index.css'
import {
  addCertificateManager,
  certificateManagerDel,
  getExamByEmps,
  queryCertificatePage,
  queryCertificateManager,
  exportExcelFile,
  exportRisk,
} from '../../api'
const { Option } = Select

class CertificateConfig extends Component {
  constructor(props) {
    super(props)
    this.state = {
      total: 0,
      pageSize: 10,
      page: 1,
      certTotal: 0, // 发放证书界面证书总数
      certPageSize: 5, // 发放证书界面条数
      certPage: 1, // 发放证书界面当前页
      examTotal: 0, // 发放证书界面人员总数
      examPageSize: 100, // 发放证书界面条数
      examPage: 1, // 发放证书界面当前页
      modelTitle: '',
      loading: false,
      isEditVisible: false, // 修改模态框状态
      isDelVisible: false, // 删除模态框状态
      isShowVisible: false, // 查看模态框状态
      isExportVisible: false,
      confirmLoading: false, // 确认按钮状态
      dataList: [], // 表格数据
      certDataList: [],
      empNoList: [],
      detailDataList: [],
      searchParams: {},
      // 表格列配置
      columns: [
        {
          fixed: 'left',
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          ellipsis: true,
          width: 110,
        },
        {
          fixed: 'left',
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 80,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '证书编号',
          dataIndex: 'sn',
          key: 'sn',
          ellipsis: true,
          width: 180,
        },
        {
          title: '证书名称',
          dataIndex: 'name',
          key: 'name',
          width: 150,
          ellipsis: true,
        },
        {
          title: '证书类型',
          dataIndex: 'type',
          key: 'type',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('certificateType', text) : text,
        },
        {
          title: '证书级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '获取时间',
          dataIndex: 'startDate',
          key: 'startDate',
          ellipsis: true,
          width: 100,
        },
        {
          title: '有效期',
          dataIndex: 'endDate',
          key: 'endDate',
          ellipsis: true,
          width: 100,
        },
        {
          title: '是否有效',
          dataIndex: 'isValidity',
          key: 'isValidity',
          ellipsis: true,
          width: 80,
          render: (text) => (text ? getDictionaryLabel('yesOrNo', text) : text),
        },
        {
          title: '发放人',
          dataIndex: 'sendEmpName',
          key: 'sendEmpName',
          ellipsis: true,
          width: 80,
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          fixed: 'right',
          render: (text, record) => (
            <Space size="middle">
              <Tooltip title="查看详情">
                <div style={{ width: 30 }}>
                  <HasPermi
                    bottonData={{
                      type: 'link',
                      interceptor: 'tmfs:certificateManager:query',
                      clickFn: () => this.showItem(record),
                      icon: <EyeOutlined />,
                    }}
                  />
                </div>
              </Tooltip>
            </Space>
          ),
        },
      ],
      certColumns: [
        {
          title: '证书名称',
          dataIndex: 'name',
          ellipsis: true,
          key: 'name',
          width: 200,
        },
        {
          title: '证书类型',
          dataIndex: 'type',
          key: 'type',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('certificateType', text) : text,
        },
        {
          title: '证书级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '时间跨度',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
        },
        {
          title: '关联科目',
          dataIndex: 'subjects',
          key: 'subjects',
          ellipsis: true,
          render: (text) => {
            if (text) {
              const arr = text.split(',')
              const subjectsList = []
              arr.forEach((item) => {
                subjectsList.push(getDictionaryLabel('examSubject', item))
              })
              return subjectsList.join(' , ')
            } else {
              return ''
            }
          },
        },
        {
          title: '证书有效期',
          dataIndex: 'validityTime',
          key: 'validityTime',
          ellipsis: true,
          width: 100,
        },
      ],
      examColumns: [
        {
          fixed: 'left',
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          ellipsis: true,
          width: 110,
        },
        {
          fixed: 'left',
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 80,
        },
        {
          title: '部门',
          dataIndex: 'orgName',
          key: 'orgName',
          ellipsis: true,
        },
        {
          title: '考试类型',
          dataIndex: 'examCategory',
          key: 'examCategory',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examType', text) : text,
        },
        {
          title: '考试科目',
          dataIndex: 'examSubject',
          key: 'examSubject',
          width: 240,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examSubject', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'examLevel',
          key: 'examLevel',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试成绩',
          dataIndex: 'examScore',
          key: 'examScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '考试结果',
          dataIndex: 'examResult',
          key: 'examResult',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examResult', text) : text,
        },
        {
          title: '考试时间',
          dataIndex: 'examDate',
          key: 'examDate',
          ellipsis: true,
          width: 100,
        },
      ],
      detailColumns: [
        {
          title: '考试科目',
          dataIndex: 'examSubject',
          key: 'examSubject',
          ellipsis: true,
          width: 200,
          render: (text) =>
            text ? getDictionaryLabel('examSubject', text) : text,
        },
        {
          title: '考试平台',
          dataIndex: 'examPlatform',
          key: 'examPlatform',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examPlatform', text) : text,
        },
        {
          title: '考试类型',
          dataIndex: 'examCategory',
          key: 'examCategory',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examType', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'examLevel',
          key: 'examLevel',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试语言',
          dataIndex: 'examLanguage',
          key: 'examLanguage',
          width: 100,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examLanguage', text) : text,
        },
        {
          title: '考试时间',
          dataIndex: 'examDate',
          key: 'examDate',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试成绩',
          dataIndex: 'examScore',
          key: 'examScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '考试结果',
          dataIndex: 'examResult',
          key: 'examResult',
          ellipsis: true,
          width: 90,
          render: (text) =>
            text === 'noPass' ? (
              <Tag color="#f50">未通过</Tag>
            ) : text === 'pass' ? (
              <Tag color="#87d068">通过</Tag>
            ) : (
              ''
            ),
        },
        {
          title: '考试组织人',
          dataIndex: 'examInitiatorEmpName',
          key: 'examInitiatorEmpName',
          ellipsis: true,
          width: 100,
        },
      ],
      // 查询条件项配置
      searchForm: [
        {
          key: 1,
          type: 'input',
          name: '员工工号',
          code: 'empNo',
          maxLength: 20,
          placeholder: '请输入员工工号',
        },
        {
          key: 2,
          type: 'input',
          name: '员工姓名',
          code: 'empName',
          maxLength: 20,
          placeholder: '请输入员工姓名',
        },
        {
          type: 'select',
          name: '地域',
          code: 'regionNo',
          options: getDictionaryLabel('addressConfig'),
        },
        {
          key: 4,
          type: 'cascader',
          name: '部门',
          code: 'dept',
          options: JSON.parse(localStorage.getItem('deptList')),
        },
        {
          key: 5,
          type: 'input',
          name: '证书名称',
          code: 'name',
          maxLength: 50,
          placeholder: '请输入名称',
        },
        {
          key: 6,
          type: 'select',
          name: '证书类型',
          code: 'type',
          options: getDictionaryLabel('certificateType'),
        },
        {
          key: 7,
          type: 'select',
          name: '证书级别',
          code: 'level',
          options: getDictionaryLabel('examLevel'),
        },
        {
          key: 8,
          type: 'select',
          name: '是否有证书',
          code: 'isGetCertificate',
          options: getDictionaryLabel('yesOrNo'),
        },
        {
          key: 9,
          type: 'rangePicker',
          name: '获取时间',
          code: 'dataRange',
        },
      ],
      bottonList: [
        {
          interceptor: 'tmfs:certificateManager:add',
          type: 'primary',
          clickFn: this.addModal,
          icon: <PlusOutlined />,
          text: '发放证书',
        },
        {
          interceptor: 'tmfs:certificateManager:del',
          type: 'danger',
          clickFn: () => this.showDelModal(null),
          icon: <DeleteOutlined />,
          text: '删除证书',
        },
      ],
      bottonListRight: [
        {
          interceptor: 'tmfs:certificateManager:export',
          icon: <DownloadOutlined />,
          text: '导出',
          clickFn: this.excelPort,
        },
      ],
      selectedRowKeys: [], // 选择行Key集合
      selectedRows: [], // 选择行集合
      selectedExamRowKeys: [], // 选择行Key集合
      selectedExamRows: [], // 选择行集合
      selectedCertRowKeys: [], // 选择行Key集合
      selectedCertRows: [], // 选择行集合
      selectedRow: {}, // 修改行数据
      isShowSearch: true,
    }
  }
  componentWillMount() {
    const list = JSON.parse(
      localStorage.getItem('deptList') ? localStorage.getItem('deptList') : '[]'
    )
    if (list.length === 0) {
      this.setState({
        isShowSearch: false,
      })
    }
  }
  componentDidMount() {
    this.getData()
  }
  addModal = () => {
    if (this.state.selectedRowKeys.length === 0) {
      message.warning('请勾选需要发放证书的员工！')
    } else {
      const list = this.state.selectedRows.map((item) => item.empNo)
      this.setState(
        {
          isEditVisible: true,
          empNoList: this.unique(list),
          modelTitle: '发放证书',
        },
        () => {
          this.getCertData()
          this.getExamData()
        }
      )
    }
  }
  showItem = (item) => {
    const itemInfo = JSON.parse(JSON.stringify(item))
    const data = {
      empNoList: [itemInfo.empNo],
    }
    if (itemInfo.type) {
      data.type = itemInfo.type
    }
    getExamByEmps(data).then((response) => {
      let dataList = []
      if (response.data.code === 200) {
        if (response.data && response.data.data) {
          dataList = response.data.data
        }
      } else {
        message.error(response.data.message || '查询数据失败!')
      }
      this.setState({
        selectedRow: itemInfo,
        isShowVisible: true,
        detailDataList: dataList,
      })
    })
  }
  getData = () => {
    this.setState({ loading: true, dataList: [] })
    queryCertificateManager(
      Object.assign(
        {},
        {
          currentPage: this.state.page,
          pageSize: this.state.pageSize,
        },
        this.state.searchParams
      )
    ).then((response) => {
      let dataList = []
      if (response.data.code === 200) {
        if (response.data && response.data.data) {
          const rsp = response.data.data
          const arr = rsp.list

          arr.forEach((item) => {
            const child = item.certificateList
            if (child) {
              if (child.length === 1) {
                item = Object.assign(item, child[0])
                item.id = item.sn || uuidv4()
              } else if (child.length > 1) {
                const itemTemp = JSON.parse(JSON.stringify(item))
                delete itemTemp.certificateList
                child.forEach((chi) => {
                  chi = Object.assign(chi, itemTemp)
                  if (chi.endDate) {
                    if (moment().diff(moment(chi.endDate), 'days') <= 0) {
                      chi.isValidity = 'Y'
                    } else {
                      chi.isValidity = 'N'
                    }
                  }
                  chi.id = chi.sn || uuidv4()
                })
                item = Object.assign(item, child[0])
                item.children = child.slice(1, child.length)
              }
              if (item.endDate) {
                if (moment().diff(moment(item.endDate), 'days') <= 0) {
                  item.isValidity = 'Y'
                } else {
                  item.isValidity = 'N'
                }
              }
              item.id = item.sn || uuidv4()
            }
          })
          dataList = arr
          this.setState({ total: rsp.total })
        }
      } else {
        message.error(response.data.message || '查询数据失败!')
      }
      this.setState({
        dataList: dataList,
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
      })
    })
  }
  showDelModal = () => {
    const selArr = []
    this.state.selectedRows.forEach((item) => {
      if (item.sn) {
        selArr.push(item.sn)
      }
    })
    if (this.state.selectedRows.length === 0) {
      return message.warning('请选择需要删除的记录！')
    }
    if (selArr.length === 0) {
      return message.warning('您所选的人员还没获得过证书')
    }
    this.setState({ isDelVisible: true })
  }
  handleDelOk = () => {
    this.buttonLoading(true)
    if (this.state.selectedRowKeys.length === 0) {
      return message.warning('请选择需要删除的记录！')
    }
    const selArr = []
    this.state.selectedRows.forEach((item) => {
      if (item.sn) {
        selArr.push(item.sn)
      }
    })
    certificateManagerDel(selArr.join(',')).then((response) => {
      if (response.data.code === 200) {
        message.success('删除数据成功!')
        this.getData()
      } else {
        message.error(response.data.message || '删除数据失败!')
      }
      this.buttonLoading(false)
      this.setState({ isDelVisible: false })
    })
  }
  handleCancel = () => {
    this.setState({
      isEditVisible: false,
      isDelVisible: false,
      isShowVisible: false,
      isExportVisible: false,
      selectedCertRowKeys: [],
      selectedCertRows: [],
      selectedExamRowKeys: [],
      selectedExamRows: [],
    })
  }
  execSearch = (data) => {
    const param = {}
    const dataRange = data.dataRange
      ? JSON.parse(JSON.stringify(data.dataRange))
      : null
    if (dataRange) {
      param.startDate = moment(dataRange[0]).format('YYYY-MM-DD')
      param.endDate = moment(dataRange[1]).format('YYYY-MM-DD')
      delete data.dataRange
    }
    const deptList = data.dept ? JSON.parse(JSON.stringify(data.dept)) : null
    delete data.dept
    const code = deptList ? deptList.pop() : ''
    if (code) {
      const item = confirmDeptByCode(code)
      param.orgsType = item.type
      param.orgs = item.value
    }

    for (var key in data) {
      if (data[key]) {
        param[key] = data[key]
      }
    }
    this.setState({ searchParams: param, page: 1 }, () => {
      this.getData()
    })
  }
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({
      page,
      pageSize,
    })
    this.setState(
      {
        page,
        pageSize,
      },
      () => {
        this.getData()
      }
    )
  }
  buttonLoading = (flag) => {
    this.setState({ confirmLoading: flag })
  }
  // 数组去重
  unique = (arr) => {
    return Array.from(new Set(arr))
  }
  handleAdd = () => {
    if (this.state.selectedCertRows.length === 0) {
      return message.warning('请选择需要发放的证书！')
    }
    if (this.state.selectedExamRows.length === 0) {
      return message.warning('请选择需要发放证书的员工！')
    }
    this.buttonLoading(true)
    const list = this.state.selectedExamRows.map((item) => item.empNo)
    const data = Object.assign({}, this.state.selectedCertRows[0], {
      empNoList: this.unique(list),
    })
    addCertificateManager(data).then((response) => {
      if (response.data.code === 200) {
        message.success('证书发放成功!')
      } else {
        message.error(response.data.message || '证书发放失败!')
      }
      this.setState({
        isEditVisible: false,
        selectedCertRowKeys: [],
        selectedCertRows: [],
        selectedExamRowKeys: [],
        selectedExamRows: [],
      })
      this.buttonLoading(false)
      this.getData()
    })
  }
  handleAddSendEmail = () => {
    if (this.state.selectedCertRows.length === 0) {
      return message.warning('请选择需要发放的证书！')
    }
    if (this.state.selectedExamRows.length === 0) {
      return message.warning('请选择需要发放证书的员工！')
    }
    this.buttonLoading(true)
    const list = this.state.selectedExamRows.map((item) => item.empNo)
    const data = Object.assign({}, this.state.selectedCertRows[0], {
      empNoList: this.unique(list),
      hasSend: 'Y',
    })
    addCertificateManager(data).then((response) => {
      if (response.data.code === 200) {
        message.success('证书发放成功!')
      } else {
        message.error(response.data.message || '证书发放失败!')
      }
      this.setState({
        isEditVisible: false,
        selectedCertRowKeys: [],
        selectedCertRows: [],
        selectedExamRowKeys: [],
        selectedExamRows: [],
      })
      this.getData()
      this.buttonLoading(false)
    })
  }
  getCertData = () => {
    queryCertificatePage(
      Object.assign(
        {},
        {
          currentPage: this.state.certPage,
          pageSize: this.state.certPageSize,
        },
        this.modifyFormRef.current.getFieldsValue()
      )
    ).then((response) => {
      let dataList = []
      if (response.data.code === 200) {
        if (response.data && response.data.data) {
          const rsp = response.data.data
          dataList = rsp.list
          this.setState({ certTotal: rsp.total })
        }
      } else {
        message.error(response.data.message || '查询数据失败!')
      }
      this.setState({ certDataList: dataList })
    })
  }
  groupBy = (array, f) => {
    const groups = {}
    array.forEach(function(o) {
      //注意这里必须是forEach 大写
      const group = JSON.stringify(f(o))
      groups[group] = groups[group] || []
      groups[group].push(o)
    })
    return Object.keys(groups).map(function(group) {
      return groups[group]
    })
  }
  getExamData = () => {
    getExamByEmps(
      Object.assign(
        {},
        {
          empNoList: this.state.empNoList,
        },
        this.modifyFormRef.current.getFieldsValue()
      )
    ).then((response) => {
      let dataList = []
      if (response.data.code === 200) {
        if (response.data && response.data.data) {
          response.data.data.forEach((item) => {
            item.orgName = item.orgCuName || item.orgBuName || item.orgBdName
          })
          const sorted = this.groupBy(response.data.data, function(item) {
            return [item.empNo] //按照name进行分组
          })
          sorted.forEach((item) => {
            if (item.length > 1) {
              item[0].children = item.slice(1, item.length)
            }
            dataList.push(item[0])
          })
        }
      } else {
        message.error(response.data.message || '查询数据失败!')
      }
      this.setState({ examDataList: dataList, examTotal: dataList.length })
    })
  }
  changeCertType = (data) => {
    this.getCertData()
    this.getExamData()
  }
  excelPort = () => {
    if (this.state.selectedRowKeys && this.state.selectedRowKeys.length > 0) {
      const empList = this.state.selectedRows.map((item) => item.empNo)
      exportRisk(
        `/tmfs/certificateManager/exportByIds?ids=${empList.join(',')}`,
        '证书管理导出详情.xlsx'
      )
    } else {
      this.setState({ isExportVisible: true })
    }
  }
  handleExportOk = () => {
    this.buttonLoading(true)
    exportExcelFile(this.state.searchParams).then((response) => {
      if (response.data.code === 200) {
        message.success('创建导出任务成功，请稍后在导出结果页面查看数据')
      } else {
        message.error(response.data.message || '创建导出任务失败!')
      }
      this.setState({ isExportVisible: false })
      this.buttonLoading(false)
    })
  }
  changeCertPage = (certPage, certPageSize) => {
    this.setState(
      {
        certPage,
        certPageSize,
      },
      () => {
        this.getCertData()
      }
    )
  }
  modifyFormRef = React.createRef() //绑定修改信息表单
  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        this.setState({
          selectedRows: selectedRows,
          selectedRowKeys: selectedRowKeys,
        })
      },
      getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    }

    const certRrowSelection = {
      selectedRowKeys: this.state.selectedCertRowKeys,
      onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        this.setState({
          selectedCertRows: selectedRows,
          selectedCertRowKeys: selectedRowKeys,
        })
      },
    }

    const examRrowSelection = {
      selectedRowKeys: this.state.selectedExamRowKeys,
      onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        this.setState({
          selectedExamRows: selectedRows,
          selectedExamRowKeys: selectedRowKeys,
        })
      },
    }
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
    if (this.state.isShowSearch) {
      return (
        <div>
          <div className="myProjectsBody">
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <AdvancedSearchForm
                  execSearch={this.execSearch}
                  formData={this.state.searchForm}
                />
              </div>
            </div>
            <div className="segmentationDiv"></div>
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <div className="operatingDiv">
                  {this.state.bottonList.map((item) => (
                    <HasPermi key={item.interceptor} bottonData={item} />
                  ))}
                  <div className="right">
                    {this.state.bottonListRight.map((item) => (
                      <HasPermi key={item.interceptor} bottonData={item} />
                    ))}
                  </div>
                </div>
                <div className="tableDiff">
                  <Table
                    rowSelection={{
                      type: 'checkbox',
                      ...rowSelection,
                    }}
                    loading={this.state.loading}
                    dataSource={this.state.dataList}
                    scroll={{ x: '100vw' }}
                    bordered
                    columns={this.state.columns}
                    rowKey={(record) => record.id}
                    pagination={{
                      total: this.state.total,
                      pageSize: this.state.pageSize,
                      current: this.state.page,
                      showSizeChanger: true,
                      onChange: this.changePage,
                      showTotal: (total) => '共 ' + total + ' 条',
                    }}
                  ></Table>
                </div>
              </div>
            </div>
          </div>

          <Modal
            width="500px"
            title="删除提示"
            visible={this.state.isDelVisible}
            onOk={() => this.handleDelOk()}
            confirmLoading={this.state.confirmLoading}
            onCancel={() => this.handleCancel()}
            cancelText="取消"
            okText="确认删除"
          >
            <DeleteFilled
              style={{
                fontSize: '28px',
                color: '#e00',
                float: 'left',
                backgroundColor: '#f002',
                padding: 8,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                fontWeight: 700,
                color: '#666',
              }}
            >
              删除所选数据？
            </div>
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                color: '#e00',
              }}
            >
              删除后数据不可恢复，请确认是否删除选中的证书信息？
            </div>
          </Modal>
          <NewModal
            modalOptions={{
              width: '1280px',
              title: '发放证书',
              forceRender: true,
              destroyOnClose: true,
              visible: this.state.isEditVisible,
              onCancel: this.handleCancel,
            }}
            buttonOptions={{
              position: 'center',
              btnList: [
                {
                  key: 0,
                  onClick: this.handleAdd,
                  text: '发放',
                  type: 'primary',
                  loading: this.state.confirmLoading,
                },
                {
                  key: 1,
                  onClick: this.handleAddSendEmail,
                  text: '发放并邮件通知',
                  type: 'primary',
                  loading: this.state.confirmLoading,
                },
                {
                  key: 2,
                  onClick: this.handleCancel,
                  text: '取消',
                },
              ],
            }}
          >
            <div className="formSearch">
              <Form ref={this.modifyFormRef} layout="inline">
                <Form.Item label="证书类型" name="type">
                  <Select
                    style={{ width: 200 }}
                    onChange={this.changeCertType}
                    allowClear
                  >
                    {getDictionaryLabel('certificateType')
                      ? getDictionaryLabel('certificateType').map((item) => (
                          <Option key={item.code} value={item.code}>
                            {item.label}
                          </Option>
                        ))
                      : null}
                  </Select>
                </Form.Item>
                <Form.Item label="证书级别" name="level">
                  <Select
                    style={{ width: 200 }}
                    onChange={this.getCertData}
                    allowClear
                  >
                    {getDictionaryLabel('examLevel')
                      ? getDictionaryLabel('examLevel').map((item) => (
                          <Option key={item.code} value={item.code}>
                            {item.label}
                          </Option>
                        ))
                      : null}
                  </Select>
                </Form.Item>
              </Form>
            </div>

            <div className="formSearch">
              <Table
                rowSelection={{
                  type: 'radio',
                  ...certRrowSelection,
                }}
                loading={this.state.loading}
                dataSource={this.state.certDataList}
                bordered
                columns={this.state.certColumns}
                scroll={{ y: 150 }}
                rowKey={(record) => record.id}
                pagination={{
                  total: this.state.certTotal,
                  pageSize: this.state.certPageSize,
                  current: this.state.certPage,
                  onChange: this.changeCertPage,
                  showTotal: (total) => '共 ' + total + ' 条',
                }}
              ></Table>
            </div>
            <div className="formExamSearch">
              <Table
                rowSelection={{
                  type: 'checkbox',
                  ...examRrowSelection,
                }}
                loading={this.state.loading}
                dataSource={this.state.examDataList}
                bordered
                scroll={{ y: 240 }}
                columns={this.state.examColumns}
                rowKey={(record) => record.id}
                pagination={{
                  total: this.state.examTotal,
                  pageSize: this.state.examPageSize,
                  current: this.state.examPage,
                  showTotal: (total) => '共 ' + total + ' 条',
                }}
              ></Table>
            </div>
            <div className="formFlootSearch">
              <strong>说明：</strong>
              <span>1、证书所需科目的考试结果必须全部为通过；</span>
              <span>
                2、高级别的科目通过也可授予低级别的证书，如：通过了C++工作级要求的科目，允许授予C++入门级证书；
              </span>
              <span>
                3、证书关联的所有科目的考试时间必须满足有效期，如：证书有效期要求为24个月，那么所有科目通过时间的区间必须在24个月以内。
              </span>
            </div>
          </NewModal>

          <NewModal
            modalOptions={{
              width: '1000px',
              title: '查看详情',
              forceRender: true,
              destroyOnClose: true,
              visible: this.state.isShowVisible,
              onCancel: this.handleCancel,
            }}
            buttonOptions={{
              position: 'center',
              btnList: [
                {
                  key: 0,
                  onClick: this.handleCancel,
                  text: '取消',
                },
              ],
            }}
          >
            {this.state.selectedRow.sn ? (
              <Form labelCol={{ style: { width: 80 } }} size="small">
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item label="证书编号" className="ant-form-item1">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.sn}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书名称">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.name}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="工号">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empNo}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书类型">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.type
                          ? getDictionaryLabel(
                              'certificateType',
                              this.state.selectedRow.type
                            )
                          : this.state.selectedRow.type}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="姓名">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书级别">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.level
                          ? getDictionaryLabel(
                              'examLevel',
                              this.state.selectedRow.level
                            )
                          : ''}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="获取时间">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.startDate}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="有效期">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.endDate}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="是否有效">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.isValidity
                          ? getDictionaryLabel(
                              'yesOrNo',
                              this.state.selectedRow.isValidity
                            )
                          : ''}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="发放人">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.sendEmpName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            ) : (
              <Form labelCol={{ style: { width: 80 } }} size="small">
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item label="工号">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empNo}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="姓名">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            )}

            <div className="formExamSearch">
              <Table
                loading={this.state.loading}
                dataSource={this.state.detailDataList}
                bordered
                columns={this.state.detailColumns}
                rowKey={(record) => record.id}
                pagination={false}
              ></Table>
            </div>
          </NewModal>
          <Modal
            title="确定导出数据"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isExportVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleExportOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否根据当前查询条件导出所有证书数据？
          </Modal>
        </div>
      )
    } else {
      return (
        <div>
          <div className="myProjectsBody">
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <div className="operatingDiv">
                  {this.state.bottonList.map((item) => (
                    <HasPermi key={item.interceptor} bottonData={item} />
                  ))}
                  <div className="right">
                    {this.state.bottonListRight.map((item) => (
                      <HasPermi key={item.interceptor} bottonData={item} />
                    ))}
                  </div>
                </div>
                <div className="tableDiff">
                  <Table
                    rowSelection={{
                      type: 'checkbox',
                      ...rowSelection,
                    }}
                    loading={this.state.loading}
                    dataSource={this.state.dataList}
                    scroll={{ x: '100vw' }}
                    bordered
                    columns={this.state.columns}
                    rowKey={(record) => record.id}
                    pagination={{
                      total: this.state.total,
                      pageSize: this.state.pageSize,
                      current: this.state.page,
                      showSizeChanger: true,
                      onChange: this.changePage,
                      showTotal: (total) => '共 ' + total + ' 条',
                    }}
                  ></Table>
                </div>
              </div>
            </div>
          </div>

          <Modal
            width="500px"
            title="删除提示"
            visible={this.state.isDelVisible}
            onOk={() => this.handleDelOk()}
            confirmLoading={this.state.confirmLoading}
            onCancel={() => this.handleCancel()}
            cancelText="取消"
            okText="确认删除"
          >
            <DeleteFilled
              style={{
                fontSize: '28px',
                color: '#e00',
                float: 'left',
                backgroundColor: '#f002',
                padding: 8,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                fontWeight: 700,
                color: '#666',
              }}
            >
              删除所选数据？
            </div>
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                color: '#e00',
              }}
            >
              删除后数据不可恢复，请确认是否删除选中的证书信息？
            </div>
          </Modal>
          <NewModal
            modalOptions={{
              width: '1280px',
              title: '发放证书',
              forceRender: true,
              destroyOnClose: true,
              visible: this.state.isEditVisible,
              onCancel: this.handleCancel,
            }}
            buttonOptions={{
              position: 'center',
              btnList: [
                {
                  key: 0,
                  onClick: this.handleAdd,
                  text: '发放',
                  type: 'primary',
                  loading: this.state.confirmLoading,
                },
                {
                  key: 1,
                  onClick: this.handleAddSendEmail,
                  text: '发放并邮件通知',
                  type: 'primary',
                  loading: this.state.confirmLoading,
                },
                {
                  key: 2,
                  onClick: this.handleCancel,
                  text: '取消',
                },
              ],
            }}
          >
            <div className="formSearch">
              <Form ref={this.modifyFormRef} layout="inline">
                <Form.Item label="证书类型" name="type">
                  <Select
                    style={{ width: 200 }}
                    onChange={this.changeCertType}
                    allowClear
                  >
                    {getDictionaryLabel('certificateType')
                      ? getDictionaryLabel('certificateType').map((item) => (
                          <Option key={item.code} value={item.code}>
                            {item.label}
                          </Option>
                        ))
                      : null}
                  </Select>
                </Form.Item>
                <Form.Item label="证书级别" name="level">
                  <Select
                    style={{ width: 200 }}
                    onChange={this.getCertData}
                    allowClear
                  >
                    {getDictionaryLabel('examLevel')
                      ? getDictionaryLabel('examLevel').map((item) => (
                          <Option key={item.code} value={item.code}>
                            {item.label}
                          </Option>
                        ))
                      : null}
                  </Select>
                </Form.Item>
              </Form>
            </div>

            <div className="formSearch">
              <Table
                rowSelection={{
                  type: 'radio',
                  ...certRrowSelection,
                }}
                loading={this.state.loading}
                dataSource={this.state.certDataList}
                bordered
                columns={this.state.certColumns}
                scroll={{ y: 150 }}
                rowKey={(record) => record.id}
                pagination={{
                  total: this.state.certTotal,
                  pageSize: this.state.certPageSize,
                  current: this.state.certPage,
                  onChange: this.changeCertPage,
                  showTotal: (total) => '共 ' + total + ' 条',
                }}
              ></Table>
            </div>
            <div className="formExamSearch">
              <Table
                rowSelection={{
                  type: 'checkbox',
                  ...examRrowSelection,
                }}
                loading={this.state.loading}
                dataSource={this.state.examDataList}
                bordered
                scroll={{ y: 240 }}
                columns={this.state.examColumns}
                rowKey={(record) => record.id}
                pagination={{
                  total: this.state.examTotal,
                  pageSize: this.state.examPageSize,
                  current: this.state.examPage,
                  showTotal: (total) => '共 ' + total + ' 条',
                }}
              ></Table>
            </div>
            <div className="formFlootSearch">
              <strong>说明：</strong>
              <span>1、证书所需科目的考试结果必须全部为通过；</span>
              <span>
                2、高级别的科目通过也可授予低级别的证书，如：通过了C++工作级要求的科目，允许授予C++入门级证书；
              </span>
              <span>
                3、证书关联的所有科目的考试时间必须满足有效期，如：证书有效期要求为24个月，那么所有科目通过时间的区间必须在24个月以内。
              </span>
            </div>
          </NewModal>

          <NewModal
            modalOptions={{
              width: '1000px',
              title: '查看详情',
              forceRender: true,
              destroyOnClose: true,
              visible: this.state.isShowVisible,
              onCancel: this.handleCancel,
            }}
            buttonOptions={{
              position: 'center',
              btnList: [
                {
                  key: 0,
                  onClick: this.handleCancel,
                  text: '取消',
                },
              ],
            }}
          >
            {this.state.selectedRow.sn ? (
              <Form labelCol={{ style: { width: 80 } }} size="small">
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item label="证书编号" className="ant-form-item1">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.sn}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书名称">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.name}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="工号">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empNo}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书类型">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.type
                          ? getDictionaryLabel(
                              'certificateType',
                              this.state.selectedRow.type
                            )
                          : this.state.selectedRow.type}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="姓名">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="证书级别">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.level
                          ? getDictionaryLabel(
                              'examLevel',
                              this.state.selectedRow.level
                            )
                          : ''}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="获取时间">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.startDate}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="有效期">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.endDate}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="是否有效">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.isValidity
                          ? getDictionaryLabel(
                              'yesOrNo',
                              this.state.selectedRow.isValidity
                            )
                          : ''}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="发放人">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.sendEmpName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            ) : (
              <Form labelCol={{ style: { width: 80 } }} size="small">
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item label="工号">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empNo}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item label="姓名">
                      <Typography.Text className="ant-form-text">
                        {this.state.selectedRow.empName}
                      </Typography.Text>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            )}

            <div className="formExamSearch">
              <Table
                loading={this.state.loading}
                dataSource={this.state.detailDataList}
                bordered
                columns={this.state.detailColumns}
                rowKey={(record) => record.id}
                pagination={false}
              ></Table>
            </div>
          </NewModal>
          <Modal
            title="确定导出数据"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isExportVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleExportOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否根据当前查询条件导出所有证书数据？
          </Modal>
        </div>
      )
    }
  }
}
export default CertificateConfig
